<template>
    <div style="overflow:hidden; height:100%; position: relative">
      <div class="contain">  
        <div class="loginBox">
          <div class="loginImg"> 
              <hr>
              <span>CDN运维管理系统</span>  
              <hr>
          </div>
          <div class="formBox">
             <Form :label-width="32" class="form" ref="form"  :model="form" :rules="ruleValidate"> 
                  <div class="login-head" style="border-bottom: 1px solid #ddd; padding-bottom: 10px; font-size: 16px; padding-left: 20px; margin-bottom: 20px;"> 
                      欢迎登录
                  </div> 
                  <FormItem label="" prop="Username"> 
                      <Input type="text" v-model="form.Username" style="width: 280px; " placeholder="请输入登录用户名" > 
                          <Button slot="prepend" icon="person"></Button>
                      </Input>
                  </FormItem>
                  <FormItem label="" prop="Password"> 
                      <Input type="password" v-model="form.Password" style="width: 280px; " placeholder="请输入登录密码" >
                          <Button slot="prepend" icon="locked"></Button>
                      </Input>
                  </FormItem> 
                </label> 
                <Button style="margin-left: 32px; font-size: 15px; width: 280px;" type="primary"  @click="handleSubmit">登录</Button>  
             </Form> 
          </div>
        </div>
      </div>
      <div class="containBg"></div> 
      <div class="litterLightBg"></div>
    </div>
</template>

<script>

import store from '../../store/index'; 
import { mapGetters } from 'vuex'
import VueLocalStorage  from 'vue-localstorage'
import iView from 'iview' 
import VueQRCodeComponent from 'vue-qrcode-component'
var setIntervals, totalTimes=60;
export default {
  components: {VueQRCodeComponent},
  props:['loginStatus'],
  store,
  data:function(){
    return {
      form: {
        Username: '',
        Password: '', 
      },  
      ruleValidate: {
          Username : [
              { required: true, message: '请填写用户名', trigger: 'blur' },
          ], 
          Password : [
              { required: true, message: '请填写密码', trigger: 'blur' },
          ], 
      },
      
      scanStatus: false,
      switchStatus: 'msg',
      uname: '',
      uuid: '',
    }
  },  
  mounted () { 
      let vm = this;
      document.addEventListener('keyup', function(ev){ 
          if(ev.keyCode === 13){
             vm.handleSubmit();
          }
      })
  },
  methods: { 
    handleSubmit (){
      let vm = this;
      
      this.$refs.form.validate((valid) => { 
          if(valid){  
              let { 
                Username,
                Password  
              } = this.form
              vm.$store.dispatch('loginForm', {form:{ 
                Username,
                Password  
              }, callback: () => { 
                  //登录后页面重新跳回
                  // let redirect = decodeURIComponent(this.$route.query.redirect || '/'); 
                  localStorage.setItem('uname',Username);
                  iView.Message.info('登录成功，正在跳转!');
                  setTimeout(function(){
                    window.location.href = '/';
                  }, 1000)
                  // this.$router.push({  
                    // path: redirect
                  // }); 
              }, check: () => {
                vm.refresh();
              }});
          }
       })  
    }, 
  } 
}
</script>

<style lang="scss" scoped>
  @import "../../assets/sass/mixins.scss";
  $textColor: #b4c9eb; 
  $focusColor: #3b7ae3; 

  $loginBoxWidth: 730px; 
  $loginBoxHeight: 600px; 

  $labelHeight: 66px;
  $labelPaddingTop: 16px;

  $checkColor: #6d83a8;

  @mixin disBlock($width : 100%, $height : 100%){
    width: $width; 
    height: $height;
  }

  body{ 
    // @include user-select(none);
  }  

  .contain{
    position: fixed;
    @include disBlock(); 
    .loginBox{
      width: $loginBoxWidth; min-height: $loginBoxHeight; margin-top:-($loginBoxHeight - 50) / 2; 
      @include position(50%, 50%);
      margin-left: -$loginBoxWidth / 2;  
    }
    .loginImg{   
        @include disBlock(100%, 100px);
        padding: 0 50px;
        hr{
          color: rgba(255,255,255,.6);
          width: 70px;
          display: inline-block;
          float: left;
          vertical-align: middle;
          margin: 20px; 
        }
        span{
          display: inline-block;
          float: left;
          color: #fff;
          font-size: 30px;
          width: 390px;
          text-align: center;
        } 
    }
    .formBox{
      margin: 0 auto; 
      @include disBlock(340px, 400px); 
      .form{ 
        border-radius: 5px;
        padding: 20px 0; 
        position: relative; background: #fff; 
        @include disBlock(100%, 290px);
        .lable{
          height:$labelHeight; line-height: $labelHeight - $labelPaddingTop; padding-top: $labelPaddingTop;  
          width: 325px; position:relative;
        }            
      }
      .btnBox{
        background: #509d5c; margin-top: 55px; border-radius: 4px;
       @include disBlock(100%, 55px);
      span{
        color: #fff; cursor: pointer; font-size: 30px;  line-height: 55px; display: inline-block;
        @include disBlock();
      }

      }
    } 
  } 

  .containBg{ 
    z-index:-1;   
    background:$loginBg;  
    @include disBlock(600%, 200%); 
  }
  .litterLightBg{
    margin: 200px auto 0;   
    background: -moz-radial-gradient(ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.005) 90%, rgba(255, 255, 255, 0));
    background: -webkit-radial-gradient(ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.005) 90%, rgba(255, 255, 255, 0)); 
    @include disBlock(700px, 800px); 
  } 
</style>


<style lang="scss">
  .formBox{
    font-size: 14px;
    .ivu-icon{
    font-size: 17px;
    }
    .ivu-tabs-bar{
      border-bottom: 2px solid #3f5689;
      margin-bottom: 0px;
    }
    .ivu-tabs-nav{
      width: 100%;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-nav-container{
      height: 60px;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
      height: 60px;
      line-height: 60px;
      background: #324b7b;
      color: #fff;
      font-size: 20px;
      padding: 0px 16px 4px;
      border: none;
      width: 50%;
      text-align: center;
      margin-right: 0px;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab:first-child{
      position: absolute;
      left: 10px;
    }
    .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
      border-bottom: 2px solid #5eb09b;
    }
  }
</style>
